<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/_reset.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css"/>
		<link rel="stylesheet" type="text/css" href="css/home.css" />
	</head>

	<body>
		<div class="home">
			<header>
				<div class="container">
					<div class="col-md-3 logo">
						<a href="#"><img src="img/微信图片_20180711104841.png" /></a>
					</div>
					<div class="col-md-9">
						<ul class="row">
							<li class="col-md-1 active">
								<a href="javasrctip:;">首页</a>
							</li>
							<li class="col-md-2">
								<a href="free.html">自由竞价</a>
							</li>
							<li class="col-md-2">
								<a href="#">封顶价格</a>
							</li>
							<li class="col-md-2">
								<a href="#">普通房产</a>
							</li>
							<li class="col-md-2">
								<a href="#">个人中心</a>
							</li>
							<li class="col-md-3 row">
								<div class="search_input">
									<div class="text">
										<input type="text" name="" id="" value="" placeholder="输入" />
									</div>
									<div class="sele">

										<select name="">
											<option value="">地区</option>
										</select>
									</div>
									<div class="butt">
										<button><i class="iconfont icon-sousuo"></i></button>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="banner">
					<img src="img/banner.png" />
				</div>
			</header>
			<section>
				<div class="container top">
					<div class="t_nav">
						<p class="layui-breadcrumb" lay-separator=">">
							<a href="#" class="back">首页</a>
							<a><cite>个人中心</cite></a>
						</p>
					</div>
				</div>
				<div class="container zhongxin">
					<div class="row">
						<div class="gerenzhongxin layui-tab row">
							<div class="col-md-3 ttt">
								<div class="top">
									<div class="img">
										<img src="img/ig.png" />
									</div>
									<p>昵称：谢谢伤心啊</p>
									<a href="#">退出登录</a>
								</div>
								<ul class="layui-nav layui-nav-tree layui-inline layui-tab-title geren" lay-filter="demo" style="margin-right: 10px;height: 100% !important;">
									<p><i class="iconfont icon-geren"></i>个人中心</p>
									<li class="layui-nav-item layui-this" lay-id="geren">
										<a href="javascript:;">个人资料</a>
									</li>
									<li class="layui-nav-item" lay-id="ziyou">
										<a href="javascript:;">自由竞价</a>
										<dl class="layui-nav-child" style="background-color: transparent !important;">
											<dd>
												<a href="javascript:;" class="layui-this layui-tab-item">参拍中</a>
											</dd>
											<dd>
												<a href="javascript:;">一片哀</a>
											</dd>
											<dd>
												<a href="javascript:;">已解散</a>
											</dd>
										</dl>
									</li>
									<li class="layui-nav-item" lay-id="fengding">
										<a href="javascript:;">封顶竞价</a>
										<dl class="layui-nav-child" style="background-color: transparent !important;">
											<dd lay-id="fengding-1">
												<a href="javascript:;">参拍中</a>
											</dd>
											<dd>
												<a href="javascript:;">一片哀</a>
											</dd>
											<dd>
												<a href="javascript:;">已解散</a>
											</dd>
										</dl>
									</li>
									<li class="layui-nav-item" lay-id="yuyue">
										<a href="javascript:;">我的预约</a>
									</li>
									<li class="layui-nav-item" lay-id="shoucang">
										<a href="javascript:;">我的收藏</a>
									</li>
									<li class="layui-nav-item" lay-id="xieyi">
										<a href="javascript:;">我的协议</a>
										<dl class="layui-nav-child" style="background-color: transparent !important;">
											<dd>
												<a href="javascript:;">拍卖服务协议</a>
											</dd>
											<dd>
												<a href="javascript:;">是想确认协议</a>
											</dd>
										</dl>
									</li>
									<li class="layui-nav-item" lay-id="baozhengjin">
										<a href="javascript:;">我的保证金</a>
										<dl class="layui-nav-child" style="background-color: transparent !important;">
											<dd class="layui-tab-item">
												<a href="javascript:;">保证金缴纳</a>
											</dd>
											<dd class="layui-tab-item">
												<a href="javascript:;">保证金退还</a>
											</dd>
										</dl>
									</li>

									<li class="layui-nav-item" lay-id="xitong">
										<a href="javascript:;">系统小女婿</a>
									</li>
								</ul>
							</div>

							<div class="ri col-md-8 layui-tab-content row">
								<div class="gerenziliao layui-tab-item layui-show">
									<div class="title">
										<p>个人资料</p>
									</div>
									<div class="conten">
										<p><span>昵称：</span>
											<input type="text" name="" id="nicheng" value="" />
										</p>
										<p>
											<span>姓名
										   ：</span>
											<input type="text" name="" id="xingming" value="" />
										</p>
										<p>
											<span>手机号码：</span>
											<input type="text" name="" id="shouji" value="" />
										</p>
										<p>
											<span>身份证号：</span>
											<input type="text" name="" id="shenfen" value="" />
										</p>
										<p><span>联系地址：</span>
											<input type="text" name="" id="lianxi" value="" />
										</p>
										<p>
											<button>修改</button>
										</p>
									</div>
								</div>
								<div class="ziyoujingjia layui-tab-item">
									<div class="title">
										<p>自由竞价</p>
									</div>
									<div class="layui-tab">
										<ul class="layui-tab-title">
											<li class="layui-this layui-tab-item">参拍中</li>
											<li>已拍下</li>
											<li>一借宿</li>
										</ul>
										<div class="layui-tab-content">
											<div class="layui-tab-item layui-show col-md-4">
												<div class="box">
													<div class="img">
													<img src="img/ig.png"/>
												</div>
												<div class="text">
												<p>啊明考上理工家里面雷克萨</p>
												<p>当前价:<span>￥1253亿</span> <a href="#">正在竞价</a></p>
												</div>
												</div>
											</div>
											<div class="layui-tab-item">22
											</div>
											<div class="layui-tab-item">55
											</div>
										</div>
									</div>
								</div>

								<div class="fengding layui-tab-item"></div>
								<div class="yuyue layui-tab-item">
									<div class="title">
										<p>我的预约</p>
									</div>
									<div class="col-md-4">
										<div class="box">
											<div class="img">
											<img src="img/ig.png"/>
										</div>
										<div class="text">
										<p>啊明考上理工家里面雷克萨</p>
										<p>当前价:<span>￥125亿</span> <a href="#">预约成功</a></p>
										</div>
										</div>
									</div>
								</div>
								<div class="shoucang layui-tab-item">
									<div class="title">
										<p>自由竞价</p>
									</div>
									<div class="layui-tab">
										<ul class="layui-tab-title">
											<li class="layui-this layui-tab-item">参拍中</li>
											<li>已拍下</li>
											<li>一借宿</li>
										</ul>
										<div class="layui-tab-content">
											<div class="layui-tab-item layui-show col-md-4">
												<div class="box">
											<div class="img">
											<img src="img/ig.png"/>
										</div>
										<div class="text">
										<p>啊明考上理工家里面雷克萨</p>
										<p>当前价:<span>￥125亿</span> <a href="#">预约成功</a></p>
										</div>
										</div>
											</div>
											<div class="layui-tab-item">22
											</div>
											<div class="layui-tab-item">55
											</div>
										</div>
									</div>
								</div>
								<div class="xieyi layui-tab-item">
									<div class="title">
										<p>我的协议</p>
									</div>
									<div class="layui-tab">
										<div class="layui-tab-content">
											
											<div class="layui-tab-item">22
											</div>
											<div class="layui-tab-item">55
											</div>
										</div>
										<form class="layui-form" action="" lay-filter="example">
										  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="服务协议">
      <input type="checkbox" name="like[read]" title="服务协议">
    </div>
  </div>
  </form>
									</div>
								</div>
								<div class="baozhengjin layui-tab-item">
									<div class="title">
										<p>我的保证金</p>
									</div>
									<div class="layui-tab">
										<ul class="layui-tab-title">
											<li class="layui-this layui-tab-item">自由竞拍</li>
											<li>封顶竞拍</li>
										</ul>
										<div class="layui-tab-content">
											<div class="layui-tab-item layui-show row">
												<div class="col-md-4">
													<div class="box">
													<div class="img">
														<img src="img/ig.png" />
													</div>
													<div class="text">
														<p>啊明考上理工家里面雷克萨</p>
														<p>当前价： <span>￥1253</span>
															<a href="#" class="tur">出价</a>
														</p>
													</div>
												</div>
												</div>
												<div class="col-md-4">
													<div class="box">
													<div class="img">
														<img src="img/ig.png" />
													</div>
													<div class="text">
														<p>啊明考上理工家里面雷克萨</p>
														<p>当前价： <span>￥1253</span>
															<a href="#" class="tur">出价</a>
														</p>
													</div>
												</div>
												</div>
											</div>
											<div class="layui-tab-item">22
											</div>
											<div class="layui-tab-item">55
											</div>
										</div>
									</div>
								</div>
								<div class="xitong layui-tab-item">
									<div class="title">
										<p>系统消息</p>
									</div>
									<div class="wrap">
										<div class="top">
											<p><span>项目名称</span><span>金额</span><span>时间</span></p>
										</div>
										<ul>
											<li>

											</li>
										</ul>
										<ul class="flow-default" style="height: 300px;" id="LAY_demo2"></ul>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer>
				(c) Copyright 2018 J L B. All Rights Reserved. 
			</footer>
		</div>
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单初始赋值
  form.val('example', {
    "username": "贤心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //复选框选中状态
    ,"close": true //开关状态
    ,"sex": "女"
    ,"desc": "我爱 layui"
  })
  
  
});
			$(".home section .zhongxin .le .top .img img").width($(".home section .zhongxin .le .top .img img").height())
			$(".home section .zhongxin .le .top .img").css("line-height",""+$(".home section .zhongxin .le .top .img").width()+"px")
		layui.use('element', function() {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

			//监听导航点击
			element.on('nav(demo)', function(elem) {
				//console.log(elem)
				layer.msg(elem.text());
			});

			var active = {
				tabChange: function() {
					//切换到指定Tab项
					element.tabChange('',''); //切换到：用户管理
				}
			};

			//Hash地址的定位
			var layid = location.hash.replace(/^#test=/, '');
			element.tabChange('test', layid);

			element.on('tab(test)', function(elem) {
				location.hash = 'test=' + $(this).attr('lay-id');
			});

		});
		layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单初始赋值
  form.val('example', {
    "username": "贤心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //复选框选中状态
    ,"close": true //开关状态
    ,"sex": "女"
    ,"desc": "我爱 layui"
  })
  
  
});
		layui.use('flow', function() {
			var flow = layui.flow;
			flow.load({
				elem: '#LAY_demo2',
				scrollElem: '#LAY_demo2',
				isAuto: false,
				isLazyimg: true,
				done: function(page, next) {
					setTimeout(function() {
						var lis = [];
						for(var i = 0; i < 6; i++) {
							//        lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
							lis.push("<li><a><span>你好，按实际开发拉手门窗口那么快喇昆仑山</span><span>360.00元</span><span>2018-01-01</span></a></li>")
						}
						next(lis.join(''), page < 6);
					}, 500);
				}
			});
		});
		//		layui.use('element', function() {
		//			var $ = layui.jquery,
		//				element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		//
		//			//触发事件
		//			var active = {
		//				tabChange: function() {
		//					//切换到指定Tab项
		//					element.tabChange('demo', '22'); //切换到：用户管理
		//				}
		//			};
		//
		//			$('.site-demo-active').on('click', function() {
		//				var othis = $(this),
		//					type = othis.data('type');
		//				active[type] ? active[type].call(this, othis) : '';
		//			});
		//
		//			//Hash地址的定位
		//			var layid = location.hash.replace(/^#test=/, '');
		//			element.tabChange('test', layid);
		//
		//			element.on('tab(test)', function(elem) {
		//				location.hash = 'test=' + $(this).attr('lay-id');
		//			});
		//
		//		});
	</script>

</html>